<ion-header>
  <ion-toolbar>
    <ion-title>{{ spec.name }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="dismiss()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item-group>
    <ion-item-divider style="padding-bottom: 6px">
      <ion-buttons slot="end">
        <ion-button fill="clear" (click)="toggleSelectAll()">
          <b>{{ selectAll ? 'Select All' : 'Deselect All' }}</b>
        </ion-button>
      </ion-buttons>
    </ion-item-divider>
    <ion-item *ngFor="let option of options | keyvalue : asIsOrder">
      <ion-label>{{ spec.spec['value-names'][option.key] }}</ion-label>
      <ion-checkbox
        slot="end"
        [(ngModel)]="option.value"
        (click)="toggleSelected(option.key)"
      ></ion-checkbox>
    </ion-item>
  </ion-item-group>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="end" class="ion-padding-end">
      <ion-button
        fill="solid"
        color="primary"
        (click)="save()"
        class="enter-click btn-128"
      >
        Done
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>
